<template>
  <div class='theme-container'>
    <el-row>
      <el-col :span="5" >
        <el-scrollbar class="left-container" shadow="hover">
          <p class="theme-title">皮肤推荐</p>
          <div
            class='theme-img'
            @click='checkTheme(p)'
            v-for='p in projectThemeList' :key='p.themeId'>
            <el-image :src=p.themeImgUrl>
              <div slot="error" style='padding: 50px;font-weight: bolder;color: #bed8ef'>
                <p>默认主题</p>
              </div>
            </el-image>
          </div>
        </el-scrollbar>
      </el-col>
      <el-col class='content' :span="14">
        <pre-view  :project-key='projectKey' v-if='hackReset'></pre-view>
      </el-col>
      <el-col :span="5">
        <el-card class="right-container" shadow="hover">3</el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>

  import PreView from '@/views/project/form/skin/PreView'
  export default {
    data () {
      return {
        projectKey: '',
        projectThemeList: [
          {
            themeImgUrl: '',
            themeColor: '',
            themeId: 0,
            btnColor: ''
          },
          {
            themeImgUrl: require('@/assets/images/imgurl01.svg'),
            themeColor: '#fde0e0',
            themeId: 1,
            btnColor: ''
          },
          {
            themeImgUrl: require('@/assets/images/imgurl03.svg'),
            themeColor: '#f3d1be',
            themeId: 2,
            btnColor: ''
          },
          {
            themeImgUrl: require('@/assets/images/imgurl02.svg'),
            themeColor: '#9ED7DEFF',
            themeId: 3,
            btnColor: ''
          }
        ],
        projectTheme: {
          projectKey: '',
          themeImgUrl: '',
          themeColor: '',
          themeId: 3,
          btnColor: ''
        },
        hackReset: true
      }
    },
    components: { PreView },
    created () {
      this.projectKey = this.$route.query.projectKey
    },
    mounted () {
      this.projectTheme.projectKey = this.projectKey
      console.log(this.projectKey)
    },
    methods: {
      checkTheme (p) {
        this.projectTheme.themeImgUrl = p.themeImgUrl
        this.projectTheme.themeColor = p.themeColor
        this.projectTheme.themeId = p.themeId
        console.log('1111111', this.projectTheme)
        this.$http.post('/project/theme/save', this.projectTheme).then(res => {
          console.log(res)

          this.hackReset = false
          this.$nextTick(() => {
            this.hackReset = true
          })
        })
      }
    }
  }
</script>
<style lang="less" scoped>
@import "src/assets/css/themeColor";
  .el-card {
    //height: calc(100% - 30px);
    min-height: 200px;
    max-height: 2000px;
    border-radius: 10px;
    text-align: center;
  }

  .el-row{
    height: 100%;
  }
  .el-col{
    height: 100%;
  }
  .theme-container {
    box-sizing: border-box;
    height: 100%;
    //background-color: #f3cdb8;
  }

  .left-container {
    box-sizing: border-box;
    height: calc(100% - 30px);
    line-height: 20px;
    text-align: center;
    padding: 15px;
    margin: 15px;
    overflow-x: hidden;
    border-radius: 7px;
    background-color: #fdfdfe;
    .theme-title {
      margin:0 0 10px 0;
      color: #373d41;
      font-weight: bolder;
    }
    .theme-img {
      width: 100%;
      height: 120px;
      background-color: rgb(244, 246, 249);
      margin-top: 10px;
      overflow: hidden;
      border-radius: 5px;
      border: @theme_pink;
    }
    .theme-img:hover{border:#f3cdb8 2px solid}
  }

  .content {
    box-sizing: border-box;
    height: 100%;
    padding:0 15px 15px 15px;
    //background-color: #00ffff;
    .el-card{
      overflow-y: hidden;
    }
  }

  .right-container {
    box-sizing: border-box;
    height: calc(100% - 30px);
    margin: 15px;
    line-height: 20px;
    text-align: center;
    padding: 30px;
    border-radius: 7px;
    background-color: @theme_background_light;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 3px; /*滚动条的圆角*/
    background-color: transparent!important; /*滚动条的背景颜色*/
  }
  .el-scrollbar__wrap{overflow-x:hidden;}
</style>
